 <template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearFix">
        <h2>企业账户信息</h2>
      </div>

      <div>
        <el-form ref="formData" :model="formData" label-width="200px">
          <el-form-item label="企业支付宝">
            <el-input class="input-width" v-model="formData.accAlipay" placeholder="支付宝账号"></el-input>
          </el-form-item>

          <hr>

          <el-form-item label="企业开户银行">
            <el-select v-model="formData.accBankBankId" @change="changeBanck" placeholder="请选择">
              <el-option
                v-for="(item, index) in bankList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="地区">
            <el-select
              v-model="formData.accBankProvinceId"
              @change="changeProvience"
              placeholder="请选择省"
            >
              <el-option
                v-for="(item, index) in provienceList"
                :key="index"
                :label="item.provinceName"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select v-model="formData.accBankCityId" @change="changeCity" placeholder="请选择城市">
              <el-option
                v-for="(item, index) in cityList"
                :key="index"
                :label="item.cityName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开户支行">
            <el-select v-model="formData.accBankBranchId" placeholder="请选择">
              <el-option
                v-for="(item, index) in branchList"
                :key="index"
                :label="item.branch"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="银行开户名">
            <el-input class="input-width" v-model="formData.accBankName" placeholder="银行开户名"></el-input>
            <div class="text-note">审核通过后，你需要使用以为账户名的对公账户转一笔确认资金到指定的账户以完成认证</div>
          </el-form-item>

          <el-form-item label="对公银行账号">
            <el-input class="input-width" v-model="formData.accBankSn" placeholder="对公银行账号"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button class="widthBtn add-style" @click="submitForm" type="primary">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getBank, getBranch, getProvince, getCity } from "api/bank.js";
import { setAccount } from "api/profile";

export default {
  data() {
    return {
      formData: {
        accAlipay: "", //企业支付宝

        accBankBankId: "", //企业开户银行id
        accBankProvinceId: "", //省id
        accBankCityId: "", //地区id
        accBankBranchId: "", //开户支行id

        accBankName: "", //银行开户名
        accBankSn: "" //企业开户银行id
      },
      bankList: [],
      provienceList: [],
      cityList: [],
      branchList: []
    };
  },
  props: {
    enterpriceInfo: {
      type: Object,
      default() {
        return [];
      }
    }
  },
  watch: {
    enterpriceInfo: {
      handler: function(newVal, oldVal) {
        this.enterpriceInfo = newVal;
        this.dataInit();
      },
      deep: true
    }
  },
  mounted() {
    this.dataInit();
    getBank().then(res => {
      this.bankList = res.map(item => {
        item.value = item.name;
        return item;
      });
    });
  },
  methods: {
    dataInit() {
      for (var i in this.formData) {
        for (var enterItem in this.enterpriceInfo) {
          if (i === enterItem) {
            this.formData[i] = this.enterpriceInfo[enterItem];
          }
        }
      }
      this.formData.accBankProvinceId &&
        this.getProvinceData(this.formData.accBankBankId);
      this.formData.accBankCityId &&
        this.getCityData(this.formData.accBankProvinceId);
      this.formData.accBankBranchId &&
        this.getBranchData(this.formData.accBankCityId);
    },
    changeBanck(id) {
      this.formData.accBankProvinceId = "";
      this.formData.accBankCityId = "";
      this.formData.accBankBranchId = "";

      this.getProvinceData(id);
    },
    changeProvience(id) {
      this.formData.accBankCityId = "";
      this.formData.accBankBranchId = "";

      this.getCityData(id);
    },
    changeCity(id) {
      this.formData.accBankBranchId = "";
      this.getBranchData(id);
    },
    getProvinceData(id) {
      // 获取省列表
      getProvince(id).then(res => {
        this.provienceList = res;
      });
    },
    getCityData(id) {
      // 获取城市列表
      getCity(id).then(res => {
        this.cityList = res;
      });
    },
    getBranchData(id) {
      // 获取支行列表
      getBranch(id).then(res => {
        this.branchList = res;
      });
    },
    submitForm() {
      setAccount(this.formData).then(res => {
        this.$message.success("数据上传成功");
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.input-width {
  width: 400px;
}

.text-note {
  @include sc(14px, #888);
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}
</style>
